*{
    margin: 0;
    padding: 0;
}
*,*::before,*::after{
    box-sizing: border-box;
}
.l{
    float: left;
}
.r{
    float: right;
}
.clf{
    clear: both;
    overflow: hidden;
}
a{
    text-decoration: none;
}
ul {
    li{
        float: left;
        list-style: none;
    }
}
h5{
    font-size: 26px;
}
h4{
    font-size: 26px;
}
b{
    font-size: 31px;
}
.line{
    background: #efefef;
    height: 10px;
}
%line{
    border: 1px solid #efefef;
}
%rline {
  border-right: 1px solid #efefef;                 // 右侧添加线
}
%tline {
  border-top: 1px solid #efefef;
}
%bline {
  border-bottom: 1px solid #efefef;
}
%li-last{
    border-right: none;                            //  右侧的线去掉
}
%three-li{                                         //  均分为3分并且居中
    text-align: center;
    width: 33.3%;
}
header {
    position: relative;
    img{
        display: block;
    }
    .hu{
        width: 100%;
        height: 18px;
        position: absolute;
        bottom: -2px;
        }
        .grzx-head{
			height:400px;
			background:url("../img/xing.jpg") no-repeat center 0;
            position: relative;
            .setting{
                position: absolute;
                right: 25px;
                top: 25px;
                i{
                    width: 44px;
                    height: 44px;
                    display: block;
                    background-image: url(../img/setting.png);
                }
            }
            .touxiang{
                position: absolute;
                top: 60px;
                left: 50%;
                margin-left: -100px;
                text-align: center;
                color: #fff;
                font-size: 40px;
                img{
                    width: 200px;
                    height: 200px;
                    border-radius: 50%;
                    margin-bottom: 40px;
                }
            }
        }
}
.top-nav{
    ul{
        @extend %bline;
        height: 104px;
        line-height: 104px;
        li{
            @extend %three-li;
            @extend %rline;
            font-size: 30px;
            &:hover{
                color: #f00;
            }
			&.act{
                color: #f00;
            }
        }
        li:last-child{
            border-right: none;
        }
    }
}
.red-bj{
    background: rgba(241, 68, 73, 0.9);
    text-align: center;
    color: #fff;
    padding: 18px 0;
    ul{
        li{
            font-size: 24px;
            width: 33.33%;
            border-right: 1px solid #c4363a;
            p{
                margin-top: 10px;
            }
        }
        li:last-child{
            @extend %li-last;
        }
    }
}
#bottom{
	width: 100%;
	position: absolute;
	bottom: 0;
	z-index: 3;
}
footer{
    .footer-nav1{
        @extend %tline;
        background: #fafafa;
        li{
            width: 25%;
            padding-top: 14px;
            text-align: center;
            padding-bottom: 16px;
            cursor: pointer;
            @extend %rline;
            a{
                i{
                    display: inline-block;
                    background-image: url(../img/bottom-nav.png);
                }
            }
            .a1{
                i{
                    height:34px;
                    width:42px;
                    background-position: -110px -39px;
                }
            }
            .a2{
                i{
                    height:38px;
                    width:39px;
                    background-position: -71px -39px;
                }
            }
            .a3{
                i{
                    height:39px;
                    width:39px;
                    background-position: -32px -39px;
                }
            }
            .a4{
                i{
                    height:39px;
                    width:32px;
                    background-position: 0 -39px;
                }
            }
        }
        li:last-child{
            border-right: none;
        }
        span{
            display: block;
            font-size: 22px;
            margin-top: 12px;
            color: #737478;

        }
    }
    #footer-nav2{
        a{
            i{
                background-image: url(../img/img-a-nav.png);
            }
        }
        .a1{
            i{
                height:32px;width:39px;background-position: -67px 0;
            }
        }
        .a2{
            i{
                height:35px;width:35px;background-position: -32px 0;
            }
        }
        .a3{
            i{
                height:38px;width:39px;background-position: -106px 0;
            }
        }
        .a4{
            i{
                height:39px;width:32px;background-position: 0 0;
            }
        }
    }
}

.img{
    img{
        max-width: 100%;
        max-height: 100%;
    }
}


/* 弹出层 */
#mask{
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    display: none;
    }
    #logins{
        width: 600px;
        border-radius: 20px;
        background: #fff;
        padding: 30px 50px;
        display: none;
        .icon{
            width: 107px;
            height: 107px;
            margin: 0 auto 20px;
            background: url(../img/dialog-icon.png) no-repeat;
        }
        .icon-success{
            background-position: 0 0;
        }
        .icon-warning{
            background-position: -107px 0;
        }
        .icon-error{
            background-position: -214px 0;
        }
        b{
            width: 100%;
            display: block;
            margin: 20px 0;
            text-align: center;
            font-size: 38px;
            line-height: 40px;
            span{
                color: #F14449;
            }
        }
        b.sub{
            font-size: 35px;
            line-height: 70px;
            color: #999;
            margin: 5px auto;
        }
        #close{
            width: 50px;
            height: 50px;
            position: absolute;
            right: -15px;
            top: -15px;
            background: #fff;
            border-radius: 50%;
            i{
                width: 24px;
                height: 24px;
                display: block;
                position: absolute;
                top: 13px;
                left: 13px;
                background-image: url(../img/close.png);
            }
        }
        ul{
            margin: 0 atuo;
            li{
                margin-top: 22px;
                .l{
                    width: 160px;
                    height: 70px;
                    line-height: 70px;
                    text-align: left;
                    font-size: 30px;
                }
                .r{
                    line-height: 40px;
                    button,
                    input{
                        height: 70px;
                        line-height: 70px;
                        width: 340px;
                        outline: none;
                        text-indent: 10px;
                        border-radius: 10px;
                        @extend %line;
                        font-size: 26px;
                        color: #333;
                    }
                    input{
                        border: 1px solid #d9d9d9;
                    }
                    button{
                        text-indent: inherit;
                        text-align: center;
                        width: 140px;
                        background: #fff;
                        margin-left: 15px;
                    }
					.send{
						background:#F14449;
						color:white;
					}
                }
            }
        }
        > a{
            margin-top: 20px;
            width: 100%;
            height: 68px;
            background: #f14449;
            border:1px solid #f14449;
            border-radius: 10px;
            display: inline-block;
            text-align: center;
            line-height: 68px;
            font-size: 30px;
            color: #fff;
        }
        > a.sub{
            background: none;
            border: 1px solid #999;
            color: #f14449;
        }
        .changeaddress .go,.changeaddress .sub{
            margin-top: 20px;
            width: 100%;
            height: 68px;
            background: #f14449;
            border:1px solid #f14449;
            border-radius: 10px;
            display: inline-block;
            text-align: center;
            line-height: 68px;
            font-size: 30px;
            color: #fff;
        }
        .changeaddress .sub{
            background: none;
            border: 1px solid #999;
            color: #f14449;
        }
        .address-title{
            font-size: 24px;
            font-weight: bold;
            height: 40px;
            line-height: 40px;
            padding: 0 15px;
            border-bottom: 1px solid #ebebeb;
        }
        .address-box{
            padding: 15px;
            border-bottom: 1px solid #ebebeb;
            color: #999;
            font-size: 20px;
            position: relative;
            .address-line{
                line-height: 30px;
                margin-bottom: 5px;
                .address-l{
                    display: inline-block;
                    width: 120px;
                    vertical-align: top;
                }
                .address-r{
                    display: inline-block;
                    width: 270px;
                }
                .isdefault{
                    display: inline-block;
                    width: 64px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    background-color: #f14449;
                    border-radius: 14px;
                    color: #fff;
                }
            }
            .address-arrow{
                display: block;
                width: 19px;
                height: 39px;
                position: absolute;
                right: 15px;
                top: 50%;
                margin-top: -20px;
                background: url(../img/address-arrow.png) no-repeat;
            }
        }
        .address-none{
            padding: 50px 0;
            text-align: center;
            font-size: 30px;
            color: #999;
            a{
                color: #338fff;
                text-decoration: underline;
            }
        }
   }
.popselectbox{position:absolute;background:#F7F7F9;bottom:0;left:0;right:0;z-index:100;border-top:1px solid #DCDCDC;overflow:hidden;opacity:0}
.popselect{position:absolute;left:0;right:0;overflow:hidden}
.popselect .popselectoption{color:#2a2a2a;font-size:28px;line-height:71px;height:71px;border-bottom:1px solid #DCDCDC;text-align:center}
.popselect .popselectoption.act{color:#901a69}
.popselectbox .canclepopselectbox{position:absolute;bottom:0;height:172px;left:29px;right:31px;background:#F7F7F9}
.popselectbox .canclepopselect{margin-top:52px;color:#828282;font-size:28px;line-height:89px;height:89px;;text-align:center;background:#D9D9D9;border-radius:5px}

.poptopselect{position:absolute;top:0;display:none;background:#FFFFFF;left:0;right:0;z-index:100;border-top:1px solid #DDDDDD;border-bottom:1px solid #DDDDDD;overflow:hidden;max-height:70%}
.poptopselect .poptopselectoption{color:#2a2a2a;font-size:26px;line-height:108px;height:108px;border-bottom:1px solid #DDDDDD;text-align:center}
.poptopselect .poptopselectoption.act{color:#901a69}

#alert{height:40px;line-height:40px;font-size:20px;position:fixed;bottom:15%;z-index:999;text-align:center;width:100%}
#alert div{border-radius:30px;padding:0 20px;background:#333;color:white;margin:0 auto;display:inline-block}
.center{position:absolute;z-index:1000;top:50%;left:50%;-webkit-transform-origin:50% 50%;-webkit-transform:translate3d(-50%,-50%,0);transform-origin:50% 50%;transform:translate3d(-50%,-50%,0)}
.hcenter{position:absolute;top:50%;-webkit-transform-origin:0 50%;-webkit-transform:translate3d(0,-50%,0);transform-origin:0 50%;transform:translate3d(0,-50%,0)}
.loading img{animation: loading 1s;-moz-animation: loading 1s;-webkit-animation: loading 1s;-o-animation: loading 1s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function: linear;-moz-animation-timing-function: linear;-webkit-animation-timing-function: linear}
@keyframes loading{from {transform: rotate(0deg)}to {transform: rotate(-360deg)}}
@-moz-keyframes loading{from {-moz-transform: rotate(0deg)}to {-moz-transform: rotate(-360deg)}}
@-webkit-keyframes loading{from {-webkit-transform: rotate(0deg)}to {-webkit-transform: rotate(-360deg)}}
@-o-keyframes loading{from {-o-transform: rotate(0deg)}to {-o-transform: rotate(-360deg)}}

#pullDown,#pullUp{height:40px;font-size:20px;margin:0 auto;display:none}
#pullDown{margin-top:-53px;padding-top:13px;clear:both;width:150px}
#pullUp{margin-bottom:13px;padding-top:20px;clear:both;width:180px;text-align:center}
#pullDown .pullDownIcon{color:red;float:left;line-height:34px;padding-top:6px}
#pullDown .pullDownLabel{float:right;line-height:40px}
#pullUp .pullUpIcon{float:left}
#pullUp .pullUpLabel{float:right;line-height:40px}
.rotatearrow_1{animation: rotatearrow_1 300ms;-moz-animation: rotatearrow_1 300ms;-webkit-animation: rotatearrow_1 300ms;-o-animation: rotatearrow_1 300ms;animation-timing-function: linear;-moz-animation-timing-function: linear;-webkit-animation-timing-function: linear;animation-fill-mode: forwards ;-moz-animation-fill-mode: forwards ;-webkit-animation-fill-mode: forwards }
@keyframes rotatearrow_1{from {transform: rotate(0deg)}to {transform: rotate(-180deg)}}
@-moz-keyframes rotatearrow_1{from {-moz-transform: rotate(0deg)}to {-moz-transform: rotate(-180deg)}}
@-webkit-keyframes rotatearrow_1{from {-webkit-transform: rotate(0deg)}to {-webkit-transform: rotate(-180deg)}}
@-o-keyframes rotatearrow_1{from {-o-transform: rotate(0deg)}to {-o-transform: rotate(-180deg)}}

.rotatearrow_2{animation: rotatearrow_2 300ms;-moz-animation: rotatearrow_2 300ms;-webkit-animation: rotatearrow_2 300ms;-o-animation: rotatearrow_2 300ms;animation-timing-function: linear;-moz-animation-timing-function: linear;-webkit-animation-timing-function: linear;animation-fill-mode: forwards ;-moz-animation-fill-mode: forwards ;-webkit-animation-fill-mode: forwards }
@keyframes rotatearrow_2{from {transform: rotate(-180deg)}to {transform: rotate(-360deg)}}
@-moz-keyframes rotatearrow_2{from {-moz-transform: rotate(-180deg)}to {-moz-transform: rotate(-360deg)}}
@-webkit-keyframes rotatearrow_2{from {-webkit-transform: rotate(-180deg)}to {-webkit-transform: rotate(-360deg)}}
@-o-keyframes rotatearrow_2{from {-o-transform: rotate(-180deg)}to {-o-transform: rotate(-360deg)}}

#contenter{position: absolute;width:100%;overflow:hidden;-ms-touch-action: none;-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;-o-text-size-adjust: none;text-size-adjust: none;display:none}

#scrolltop{position:absolute;bottom:-80px;right:20px;z-index:2}
.scrollshow{animation: scrollshow 300ms;-moz-animation: scrollshow 300ms;-webkit-animation: scrollshow 300ms;-o-animation: scrollshow 300ms;animation-timing-function: ease-out;-moz-animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out;animation-fill-mode: forwards ;-moz-animation-fill-mode: forwards ;-webkit-animation-fill-mode: forwards}
@keyframes scrollshow{from {bottom:20px}to {bottom:120px}}
@-moz-keyframes scrollshow{from {bottom:20px}to {bottom:120px}}
@-webkit-keyframes scrollshow{from {bottom:20px}to {bottom:120px}}
@-o-keyframes scrollshow{from {bottom:20px}to {bottom:120px}}

.scrollhide{animation: scrollhide 300ms;-moz-animation: scrollhide 300ms;-webkit-animation: scrollhide 300ms;-o-animation: scrollhide 300ms;animation-timing-function: ease-out;-moz-animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out;animation-fill-mode: forwards ;-moz-animation-fill-mode: forwards ;-webkit-animation-fill-mode: forwards}
@keyframes scrollhide{from {bottom:120px}to {bottom:0px}}
@-moz-keyframes scrollhide{from {bottom:120px}to {bottom:0px}}
@-webkit-keyframes scrollhide{from {bottom:120px}to {bottom:0px}}
@-o-keyframes scrollhide{from {bottom:120px}to {bottom:0px}}

html {-ms-touch-action: none;touch-action: manipulation}
body{overflow:hidden; font-size: 28px;color: #333;}
ul{margin-bottom:0}

.bannernum{position:absolute;bottom:24px;height:12px;left:50%;-webkit-transform-origin:50% 0;-webkit-transform:translate3d(-50%,0,0)}
.bannernum .circle{border-radius:50%;width:10px;height:10px;float:left;border:1px solid white;margin-right:10px;-webkit-transform-origin:50% 0;-webkit-transform:translate3d(-50%,0,0)}
.bannernum .circle.act{background:white}
.bannernum .circle.last{margin-right:0}

#header {position: absolute; top: 0; left: 0; width: 100%;z-index:2;display:none}
#header .row{background-color:#1B1B1F}
#header .topinfo{height: 88px;line-height:88px;text-align:center;color:white;font-size:36px}
#header .backico{background:url(../img/backarrow.png) no-repeat 25px center;width:131px;height:88px;position:absolute;left:0;padding-left:59px}
#header .cancle{height:88px;position:absolute;right:32px;top:0;color:white;line-height:88px;width:65px;font-size:26px}

#bgcover{position:absolute;z-index:99;top:0;left:0;right:0;bottom:0;background:black;opacity:0.55}

.popcitybox{position:absolute;background:#F7F7F9;bottom:0;left:0;right:0;z-index:100;border-top:1px solid #DCDCDC;overflow:hidden;opacity:0;height:385px}
.popcitybox .popcityrelativebox{height:213px}
.popcitybox .popcity{position:absolute;left:0;right:0;overflow:hidden;height:213px}
.popcitybox .popcity .popcityoption{color:#2a2a2a;font-size:28px;line-height:71px;height:71px;text-align:center}
.popcitybox .popcity .popcityoption.act{color:#901a69}
.popcitybox .getpopcitybox{padding:26px 31px 26px 29px;background:#F7F7F9;border-bottom:1px solid #DCDCDC}
.popcitybox .getpopcity{color:white;font-size:24px;line-height:50px;height:50px;text-align:center;background:#8F1664;border-radius:5px;width:80px;float:right}
.popcitybox .cancelpopcity{color:#828282;font-size:24px;line-height:50px;height:50px;text-align:center;background:#D9D9D9;border-radius:5px;width:80px;float:left}

#poper{position:absolute;z-index:9999;width:100%;height:100%;background:white;top:0;left:100%;bottom:0}
#poper .popnamebox{line-height:88px;height:88px;background:#1B1B1F;font-size:36px;color:white}
#poper .backico{background:url(../img/backarrow.png) no-repeat 25px center;width:131px;height:88px;position:absolute;left:0;padding-left:59px}
#poper .popname{padding-left:70px;float:left}
#poper .popcontent{position: absolute;width:100%;bottom:0;overflow:hidden;-ms-touch-action: none;-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;-o-text-size-adjust: none;text-size-adjust: none;color:black}
#poper .popcontent .activityimg{margin-top:30px}
#poper .popcontent .activityimgtitle{line-height:60px;font-size:30px;font-weight:bold;text-align:center;margin:10px auto 30px auto}
#poper .popcontent .activityimgintro{font-size:22px;line-height:32px}
#poper .popcontent .activitydatatitlebox{margin:70px 10px 20px 10px}
#poper .popcontent .activitydatatitlebox .activitydatanum{font-size:30px;float:left;height:50px;width:50px;margin-right:30px;border-radius:25px;background:#D85179;line-height:50px;text-align:center;color:white}
#poper .popcontent .activitydatatitlebox .activitydatatitle{font-size:26px;font-weight:bold;float:left;line-height:50px}
#poper .popcontent .activitydataintro{font-size:22px;line-height:32px;margin:10px 0}
#poper .popcontent .activitydatadetailbox{margin-top:20px}
#poper .popcontent .activitydataprice,#poper .popcontent .activitydatalike{color:#D85179;font-size:22px;line-height:32px}
#poper .popcontent .activitydatapricebox{float:left;width:50%}
#poper .popcontent .activitydatadetail{float:right;border:1px solid #D85179;height:50px;line-height:50px;margin-top:8px;color:#D85179;padding:0 10px;border-radius:25px;font-size:26px}
